import { boot } from 'quasar/wrappers';
import axios, { AxiosInstance } from 'axios';

declare module 'vue' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance;
    $api: AxiosInstance;
  }
}

// Be careful when using SSR for cross-request state pollution
// due to creating a Singleton instance here;
// If any client changes this (global) instance, it might be a
// good idea to move this instance creation inside of the
// "export default () => {}" function below (which runs individually
// for each client)
const api = axios.create({
  headers: {
    'Content-Type': 'application/json'
  }
});
// 添加响应拦截器
api.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data; // 返回响应数据，方便后续处理
  },
  error => {
    // 对响应错误做点什么
    if (error.response) {
      // 请求已发出，服务器响应了一个状态码
      // 例如 404 或 500
      console.error('响应错误:', error.response.status, error.response.data);
      // 根据状态码可以进行不同的处理
      if (error.response.status === 401) {
        // 处理未授权错误，例如重定向到登录页面
        console.error('未授权，请登录');
      }
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('请求错误:', error.request);
    } else {
      // 发生了其他错误
      console.error('其他错误:', error.message);
    }
    return Promise.reject(error); // 返回错误以便调用者可以处理
  }
);
export default boot(({ app }) => {
  // for use inside Vue files (Options API) through this.$axios and this.$api

  app.config.globalProperties.$axios = axios;
  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
  //       so you won't necessarily have to import axios in each vue file

  app.config.globalProperties.$api = api;
  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
  //       so you can easily perform requests against your app's API
});

export { api };
